<template>
  <div>
    <div class="header">
      <div class="header-panel">
        <img class="bootpage_systemname_logo" src="../assets/nav/standard/index/bootpage_systemname_logo.png" />
        <img @click="downOpen" class="bootpage_appdownload_btn"
          src="../assets/nav/standard/index/bootpage_appdownload_btn.png" />
      </div>
      <div class="header-pic">
        <div style="float: left">
          <img src="../assets/nav/standard/index/bottpage_pc_pic.png" class="header-pic-img" />
        </div>
        <div class="header-sd">
          <div class="header-sd-label">
            以信息化实现安全管理标准化
          </div>
          <div class="header-sd-text">
            让安全工作第一次就做对
          </div>
          <div class="btn-login" @click="onlogin">
            <span>立即登录</span>
          </div>
        </div>
        <div style="float: left">
          <img class="header-logo-sys" src="../assets/nav/standard/index/bottpage_anquan_pic.png" />
        </div>
      </div>
    </div>
    <div class="panel-content">
      <div class="panel-item" style="width: 72%">
        <el-row>
          <el-col :span="9">
            <table>
              <tr>
                <td>
                  <img class="safety-item-img" src="../assets/nav/standard/index/page_anquan_pic.png" />
                </td>
                <td>
                  <div class="manage-item-scyfjc">
                    双重预防机制
                  </div>
                  <div class="manage-item-scyfjc-label">
                    <span>双重预防</span><span class="manage-item-scyfjc-span">双重把控</span>
                  </div>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :span="5">
            <table>
              <tr>
                <td>
                  <img class="manage-item-safety-img"
                    src="../assets/nav/standard/index/bootpage_hazardousoperations_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span1">危险作业管理</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span2">更高效更安全的管理</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :span="5">
            <table>
              <tr>
                <td>
                  <img class="manage-item-safety-risk"
                    src="../assets/nav/standard/index/bootpage_troubleshoot_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span1">隐患排查管理</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span2">排除99%隐患能力</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :span="5">
            <table>
              <tr>
                <td>
                  <img class="manage-item-safety-contractor"
                    src="../assets/nav/standard/index/bootpage_contractor_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span1">承包商安全</span>
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span2">安全可靠便捷</span>
                </td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </div>
    </div>
    <div class="common-item-row-panel">
      <div class="common-item-row-border"></div>
    </div>
    <div class="panel-content">
      <div class="panel-item">
        <el-row>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="safetydreponse-item-img" src="../assets/nav/standard/index/bootpage_safety _icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">安全责任制</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="org-item-img" src="../assets/nav/standard/index/bootpage_ledger_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">综合信息台账</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="train-item-img" src="../assets/nav/standard/index/bootpage_training_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">安全教育培训</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="organ-item-img" src="../assets/nav/standard/index/bootpage_meeting_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">安全组织会议</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="risk-item-img" src="../assets/nav/standard/index/bootpage_promise_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">风险研判承诺</span>
                </td>
              </tr>
            </table>
          </el-col>
        </el-row>
        <el-row style="margin-top: 45px">
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="accident-item-img" src="../assets/nav/standard/index/bootpage_accident_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">事故管理</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="device-item-img" src="../assets/nav/standard/index/bootpage_deviceintegrity_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">设备完整性</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="action-item-img" src="../assets/nav/standard/index/bootpage_assess_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">行为安全观察</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="safetysystem-item-img" src="../assets/nav/standard/index/bootpage_audit_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">安全体系审核</span>
                </td>
              </tr>
            </table>
          </el-col>
          <el-col :lg="{ span: '4-8' }" :md="8" :sm="12" :xs="24">
            <table>
              <tr>
                <td>
                  <img class="technology-item-img" src="../assets/nav/standard/index/bootpage_craft_icon.png" />
                </td>
              </tr>
              <tr>
                <td>
                  <span class="span3">工艺设备变更</span>
                </td>
              </tr>
            </table>
          </el-col>
        </el-row>
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="460px" append-to-body>
      <div style="height: 660px">
        <div class="dialog-item">
          <div class="label-num">1</div>
          <div class="label-text">手机扫码二维码下载APP</div>
          <div style="clear: both"></div>
        </div>
        <div class="dialog-item" style="margin-top: 40px; margin-bottom: 50px">
          <!--<img src="../assets/logo/appurl.png" />-->
          <div id="qrcode" ref="qrcode" class="qr-img"></div>
        </div>
        <div class="dialog-item">
          <div class="label-num">2</div>
          <div class="label-text">下载APP到电脑</div>
          <div style="clear: both"></div>
        </div>
        <div class="dialog-item" style="margin-top: 25px">
          <div class="down-label1">点击下方按钮</div>
        </div>
        <div class="dialog-item">
          <div class="down-label2">你还可以下载到电脑</div>
        </div>
        <div class="dialog-item">
          <div class="down-app" @click="downApp">
            立&nbsp;即&nbsp;下&nbsp;载
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getclientWidth } from "@/utils/common";
import QRCode from "qrcodejs2";
export default {
  name: "navigation",
  data() {
    return {
      title: "",
      open: false,
    };
  },
  created() {
    getclientWidth();
    document.title = '语音AI识别平台';
    $("#app").css("background-color","white");
  },
  methods: {
    async downOpen() {
      this.open = true;
      if (this.$refs.qrcode != null) {
        this.$refs.qrcode.innerHTML = "";
      }
      this.$nextTick(() => {
        this.crateQrcode();
      });
    },
    crateQrcode() {
      this.qr = new QRCode("qrcode", {
        width: 200,
        height: 200,
        text:
          process.env.VUE_APP_BASE_API +
          "/profile/template/safetyproductapp.apk",
      });
    },
    downApp() {
      window.open(
        process.env.VUE_APP_BASE_API + "/profile/template/safetyproductapp.apk"
      );
    },
    onlogin() {
      var nav = window.localStorage.getItem("nav");
      if (nav != null && nav != "" && nav != undefined) {
        window.open("/login/" + nav);
      } else {
        window.open("/login");
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 28.57rem;
  background: url("../assets/nav/standard/index/bootpage_pic.png") no-repeat;
  background-size: 100% 100%;
  position: relative;
}

.bootpage_systemname_logo {
  position: relative;
  margin-left: 17.07rem;
  margin-top: 2rem;
  width: 29.92rem;
  height: 3.85rem;
}

.bootpage_appdownload_btn {
  position: relative;
  float: right;
  margin-top: 2rem;
  right: 12.21rem;
  width: 10.71rem;
  height: 3.85rem;
  cursor: pointer;
}

.btn-login {
  border-radius: 4.28rem;
  width: 20.42rem;
  height: 4.42rem;
  background: #07bf84;
  text-align: center;
  cursor: pointer;
  margin-top: 1.42rem;

  span {
    width: 8.57rem;
    height: 2.14rem;
    font-size: 1.64rem;
    font-family: Source Han Sans CN, Source Han Sans CN-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    line-height: 4.42rem;
  }
}

.panel-content {
  display: flex;
  justify-content: center;
}

.panel-item {
  margin-top: 1.64rem;
  width: 62%;

  table {
    text-align: center;
    width: 100%;
  }
}

.span1 {
  width: 10.28rem;
  font-size: 1.42rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Bold;
  font-weight: 700;
  text-align: left;
  color: #4c70cb;
  line-height: 1.78rem;
}

.span2 {
  width: 12.85rem;
  font-size: 1.14rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Light;
  font-weight: 300;
  text-align: left;
  color: #4c70cb;
  line-height: 1.78rem;
}

.span3 {
  width: 8.21rem;
  font-size: 1.14rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Light;
  font-weight: 300;
  text-align: center;
  color: #43425d;
}

@media only screen and (min-width: 768px) {
  .el-col-sm-4-8 {
    width: 20%;
  }

  .el-col-sm-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-sm-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-sm-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 992px) {
  .el-col-md-4-8 {
    width: 20%;
  }

  .el-col-md-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-md-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-md-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 1200px) {
  .el-col-lg-4-8 {
    width: 20%;
  }

  .el-col-lg-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-lg-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-lg-push-4-8 {
    position: relative;
    left: 20%;
  }
}

@media only screen and (min-width: 1920px) {
  .el-col-xl-4-8 {
    width: 20%;
  }

  .el-col-xl-offset-4-8 {
    margin-left: 20%;
  }

  .el-col-xl-pull-4-8 {
    position: relative;
    right: 20%;
  }

  .el-col-xl-push-4-8 {
    position: relative;
    left: 20%;
  }
}

.dialog-item {
  display: flex;
  justify-content: center;
  align-items: center;
}

.label-num {
  float: left;
  width: 1.57rem;
  height: 1.57rem;
  line-height: 1.57rem;
  background: #0176e7;
  color: white;
  text-align: center;
  border-radius: 50%;
}

.label-text {
  float: left;
  margin-left: 0.85rem;
  height: 1.35rem;
  font-size: 1.35rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  text-align: center;
  color: #4d4f5c;
  line-height: 1.35rem;
}

.down-label1 {
  font-size: 1rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  color: #000000;
  line-height: 1.42rem;
}

.down-label2 {
  font-size: 1rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Regular;
  font-weight: 400;
  text-align: center;
  color: #000000;
  line-height: 1.42rem;
}

.down-app {
  width: 14.42rem;
  height: 4.5rem;
  line-height: 4.5rem;
  text-align: center;
  background: linear-gradient(180deg, #5fb3fd, #3a72f3);
  border-radius: 1.07rem;
  color: white;
  font-weight: 400;
  font-size: 1.57rem;
  margin-top: 2.57rem;
  cursor: pointer;
}

.header-panel {
  height: 10.5rem;
  width: 100%;
  position: relative
}

.header-pic {
  height: 18.07rem;
  width: 100%;
  display: flex;
  justify-content: center;
}

.header-pic-img {
  width: 15.35rem;
  height: 11.92rem;
  margin-top: 2.57rem;
}

.header-sd {
  float: left;
  width: 23.42rem;
  margin-left: 4.85rem;
  margin-right: 8.14rem;
}

.header-sd-label {
  margin-top: 1.42rem;
  font-size: 1.71rem;
  font-family: Source Han Sans CN, Source Han Sans CN-ExtraLight;
  text-align: left;
  color: #ffffff;
  line-height: 3.57rem;
}

.header-sd-text {
  font-size: 1.71rem;
  font-family: Source Han Sans CN, Source Han Sans CN-ExtraLight;
  text-align: left;
  color: #ffffff;
  line-height: 3.57rem;
}

.header-logo-sys {
  width: 19.92rem;
  height: 15.64rem;
}

.safety-item-img {
  width: 12.78rem;
  height: 10.4rem;
}

.manage-item-scyfjc {
  font-size: 2.78rem;
  font-family: DOUYU Font, DOUYU Font-DOUYU Font;
  font-style: italic;
  font-weight: bold;
  text-align: left;
  color: #0464d1;
}

.manage-item-scyfjc-label {
  margin-left: 0.35rem;
  margin-top: 0.71rem;
  font-size: 1.71rem;
  font-family: Source Han Sans CN, Source Han Sans CN-Light;
  font-weight: 300;
  text-align: left;
  color: #777777;
}

.manage-item-scyfjc-span {
  margin-left: 1.42rem;
}

.manage-item-safety-img {
  width: 100px;
  height: 100px;
}

.manage-item-safety-risk {
  width: 100px;
  height: 100px;
}

.manage-item-safety-contractor {
  width: 100px;
  height: 100px;
}

.common-item-row-panel {
  display: flex;
  justify-content: center
}

.common-item-row-border {
  width: 78%;
  margin-top: 2.21rem;
  border: 1px dashed #dfdfdf
}

.safetydreponse-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.org-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.train-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.organ-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.risk-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.accident-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.device-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.action-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.safetysystem-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.technology-item-img {
  width: 4.57rem;
  height: 4.57rem;
}

.panel-item{
  border: 0px !important;
}
</style>
